<template>
  <div class="home">
    <div v-if="isLoading">
      <home-head></home-head>
      <home-swiper :banner="banner" ></home-swiper>
      <home-icons :icons="icons"></home-icons>        
      <recommend  :recommend="recommendList" ></recommend>
      <weekend  :weekend="weekendList"></weekend>
    </div>
    <div v-else class="Loading">
      <img src="../../assets/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
import HomeHead from "./components/Head";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/icons";
import Recommend from "./components/Recommend";
import Weekend from "./components/Weekend";
import { HomeModel } from "../../models/HomeModel";
const homemodel = new HomeModel();
export default {
  name: "home",
  components: {
    HomeHead,
    HomeSwiper,
    HomeIcons,
    Recommend,
    Weekend
  },
  data() {
    return {
      banner: [],
      icons: [],
      recommendList: [],
      weekendList: [],
      isLoading: false,
      currentCity:""
    };
  },
  computed: {
    city() {
      return this.$store.state.city;
    }
  },
  mounted() {
    this.currentCity = this.city;
    homemodel.getHome(this.city).then(res => {
      let data = res.data.data;
      let { banner, icons, recommendList, weekendList } = data;
      this.banner = banner;
      this.icons = icons;
      this.recommendList = recommendList;
      this.weekendList = weekendList;
      this.isLoading = "true";
    });
  },
  watch: {
    city(){
      homemodel.getHome(this.city).then(res => {
        let data = res.data.data;
        let { banner, icons, recommendList, weekendList } = data;
        this.banner = banner;
        this.icons = icons;
        this.recommendList = recommendList;
        this.weekendList = weekendList;
        this.isLoading = "true";
      });
    }
  }
  /* 进入页面触发  deactivated关闭页面触发*/
  // activated() {
  //   if (this.currentCity != this.city) {
  //     this.currentCity = this.city;
  //     homemodel.getHome(this.city).then(res => {
  //       let data = res.data.data;
  //       let { banner, icons, recommendList, weekendList } = data;
  //       this.banner = banner;
  //       this.icons = icons;
  //       this.recommendList = recommendList;
  //       this.weekendList = weekendList;
  //       this.isLoading = "true";
  //     });
  //   }
  // }
};
</script>
<style lang="scss" scoped>
.hots-title {
  line-height: 60px;
  background: #eee;
  text-align: left;
  padding: 20px;
}
.Loading {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

